<template>
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src
import { watchEffect,watch,ref,reactive } from 'vue';
export default {
  name: 'HomeView',
  components: {
  },
  setup(props) {
    // 特别注意：只能监听 ref reactive 声明响应数据。
    let num = ref(10);
    const number = ref(20);
     const data = reactive({
      age: 18
    })
    setTimeout(() => {
      num.value++;
      number.value++;
      data.age++;
    }, 1000);
   
    // 不需要传入监听的元素，想要监听元素，需要回调函数里面使用。进入页面的时候会自动触发一次
    // watchEffect(() => {
    //   console.log('num' + num.value);
    //   console.log('number' + number.value);
    // })
    watch([num,()=>data.age],([anewVal,bnewVal],[aoldVal,boldVal])=>{
      // console.log(newVal);
      // console.log(oldVal);
      console.log(anewVal,bnewVal);
      console.log(aoldVal,boldVal);
    },{
      // immediate: true // 默认让watch自动触发一次
    })

    // watch(number,(newVal,oldVal)=>{
    //   console.log(newVal);
    //   // console.log(oldVal);
    // },{
    //   immediate: true // 默认让watch自动触发一次
    // })
   
  }
}
</script>
